<template>
  <div>
    <div ref="vtkContainer" />
    <table class="controls">
      <tbody>
        <tr>
          <td>
            <select
              style="width: 100%"
              :value="representation"
              @change="setRepresentation($event.target.value)"
            >
              <option value="0">Points</option>
              <option value="1">Wireframe</option>
              <option value="2">Surface</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>
            <input
              type="range"
              min="4"
              max="80"
              :value="coneResolution"
              @input="setConeResolution($event.target.value)"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, unref, onMounted, onBeforeUnmount, watchEffect } from 'vue';
import axios from 'axios';
import '@kitware/vtk.js/Rendering/Profiles/Geometry';
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';

// 定义 props
const props = defineProps({
  filename: {
    type: String,
    default: '',
  },
  serverUrl: {
    type: String,
    default: 'http://localhost:5000',
  },
});

console.log("VtkWorld2");
console.log(props.filename)
console.log(props.serverUrl)

// 响应式变量
const vtkContainer = ref(null);
const context = ref(null);
const coneResolution = ref(6);
const representation = ref(2);

// 方法
function setConeResolution(res) {
  coneResolution.value = Number(res);
}

function setRepresentation(rep) {
  representation.value = Number(rep);
}

const loadVtkFile = async (filename) => {  
  if (!filename) 
    return;
  loading.value = true;
  error.value = '';
  try {
    // 从后端获取VTK文件
    const response = await axios.get(
      `${props.serverUrl}/api/vtk-file/content/${filename}`,
      { responseType: 'text' }
    );

    // 添加VTK数据解析
    console.log(response.data)

    return response.data;
  } catch (error) {
    console.error('加载VTK文件失败:', error);
    return null;
  }
};

// 副作用监听
watchEffect(() => {
  const res = unref(coneResolution);
  const rep = unref(representation);
  if (context.value) {
    const { actor, coneSource, renderWindow } = context.value;
    coneSource.setResolution(res);
    actor.getProperty().setRepresentation(rep);
    renderWindow.render();
  }
});

// 生命周期钩子
onMounted(() => {
  if (!context.value) {
    const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
      rootContainer: vtkContainer.value,
    });
    const coneSource = vtkConeSource.newInstance({ height: 1.0 });

    const mapper = vtkMapper.newInstance();
    mapper.setInputConnection(coneSource.getOutputPort());

    const actor = vtkActor.newInstance();
    actor.setMapper(mapper);

    const renderer = fullScreenRenderer.getRenderer();
    const renderWindow = fullScreenRenderer.getRenderWindow();

    renderer.addActor(actor);
    renderer.resetCamera();
    renderWindow.render();

    context.value = {
      fullScreenRenderer,
      renderWindow,
      renderer,
      coneSource,
      actor,
      mapper,
    };
  }
});

onBeforeUnmount(() => {
  if (context.value) {
    const { fullScreenRenderer, coneSource, actor, mapper } = context.value;
    actor.delete();
    mapper.delete();
    coneSource.delete();
    fullScreenRenderer.delete();
    context.value = null;
  }
});
</script>

<style scoped>
.controls {
  position: absolute;
  top: 25px;
  left: 25px;
  background: white;
  padding: 12px;
}
</style>